//开关按钮
.ss-switch
  width: 50px
  height 24px
  color: $color-text-info
  cursor: pointer
  display: inline-block
  position: relative
  .ss-switch-bg, input
    position: absolute
    top: 0
    left 0
    width: 100%
    height: 100%
  input 
    opacity 0
    &:checked
      &~.ss-switch-bg
        background: $color-primary
      &+.ss-switch-handle
        &:before
          left: calc(100% - 22px);
        &:after
          content: '开'
          color: $color-primary
          left: calc(100% - 18px);
          // transition: all .3s ease-in-out;
  .ss-switch-bg
    background: $color-line
    border-radius: 12px
  .ss-switch-handle
    &:before
      position: absolute;
      transition: all .2s ease-in-out;
      top: 2px;
      left: 2px;
      width: 20px;
      height: 20px;
      background: #fff
      border-radius: 100%
      z-index 1
      content: ''
    &:after
      content: '关'
      transition: all .2s ease-in-out;
      position: relative
      z-index 2
      left: 5px;
      top: 2px;